<template>
  <view class="mm-wrap">
    <!-- 音/视频播放 -->
    <view v-if="loading" class="video-loading">
      <u-loading mode="flower" :size="60" :color="globPrimaryColor" v-if="loading"></u-loading>
    </view>
    <view v-if="!previewEnd" class="mm-video-player">
      <video
        v-if="!loading"
        id="mmVideoPlayer"
        class="video-wrapper"
        :key="menuKey"
        :src="src"
        :poster="detailsInfo.cover_url"
        :autoplay="autoplay"
        :controls="controls"
        :initial-time="initialTime"
        :duration="duration"
        @error="error"
        @play="play"
        @pause="pause"
        @ended="ended"
        @timeupdate="timeupdate"
        @fullscreenchange="fullscreenchange"
        @loadedmetadata="onLoadComplete"
      >
        <!-- 版权 -->
        <notice-bar
          v-if="isFullScreen && copyrightShow == 1"
          :width="noticeScreenWidth"
          :text="copyrightContent"
          :fontSize="12"
          :frequency="playerData.marquee.frequency"
          color="#ffffff"
          :defaultStyle="{
            top: '20rpx',
            left: '0px',
            background: 'rgba(0, 0, 0, 0.2)',
          }"
        ></notice-bar>
        <notice-bar
          v-if="!isFullScreen && copyrightShow == 1"
          :width="noticeWidth"
          :text="copyrightContent"
          :fontSize="12"
          :frequency="playerData.marquee.frequency"
          color="#ffffff"
          :defaultStyle="{
            top: '20rpx',
            left: '45px',
            background: 'rgba(0, 0, 0, 0.2)',
          }"
        ></notice-bar>

        <!-- 跑马灯 -->
        <notice-bar
          v-if="usingMarquee"
          width="100%"
          :text="marqueeText"
          :fontSize="playerData.marquee.font_size"
          :frequency="playerData.marquee.frequency"
          :color="marqueeColor"
        ></notice-bar>

        <!-- 音频显示课程图片 -->
        <!-- #ifndef APP-PLUS -->
        <!-- <cover-view
          class="video-image"
          :style="{ display: !loading && videoType == 2 ? 'block' : 'none' }"
        >
          <cover-image :src="detailsInfo.cover_url"></cover-image>
        </cover-view> -->
        <!-- #endif -->
        <slider
          v-if="!controls"
          class="video-control-slider"
          :activeColor="globPrimaryColor"
          :value="current"
          :max="duration"
          backgroundColor="rgba(195,197,198,.5)"
          :block-size="16"
          @change="seeked"
          @changing="seeking"
        >
        </slider>
        <cover-view v-if="!controls" class="video-control-tool">
          <cover-image
            class="video-control-play"
            @tap.stop="onPlay"
            src="@/static/images/play.png"
            v-if="paused"
          ></cover-image>
          <cover-image
            class="video-control-play"
            @tap.stop="onPlay"
            src="@/static/images/pause.png"
            v-else
          ></cover-image>
          <cover-view class="video-control-current" :style="[controlDurationStyle]">{{
            format(current)
          }}</cover-view>
          <cover-view class="video-control-number">/</cover-view>
          <cover-view class="video-control-duration" :style="[controlDurationStyle]">{{
            format(duration)
          }}</cover-view>
          <cover-image
            class="video-control-fullscreen"
            @tap.stop="onfullscreenchange"
            src="@/pageCourse/static/images/fullscreen.png"
          ></cover-image>
        </cover-view>

        <!-- 清晰度按钮 -->
        <cover-view class="current-quality" @tap.stop="clickHdShow">{{ ccH5hdTxt }}</cover-view>

        <!-- 倍速按钮 -->
        <cover-view class="current-rate" @tap.stop="clickSpShow">{{ ccH5spTxt }}</cover-view>

        <!-- 清晰度列表 -->
        <cover-view
          class="quality-list"
          :style="{ display: hdShow ? 'block' : 'none' }"
          @tap.stop="clickHdShow"
        >
          <cover-view class="quality-list-wrap">
            <cover-view
              class="quality-item"
              :class="ccH5hdTxt == item.definition ? 'active' : ''"
              v-for="(item, index) in videoSrcList"
              :key="index"
            >
              <cover-view @tap.stop="changeQuality(item)">{{
                item.definition
              }}</cover-view></cover-view
            >
          </cover-view>
        </cover-view>

        <!-- 倍速列表 -->
        <cover-view
          class="rate-list"
          :style="{ display: spShow ? 'block' : 'none' }"
          @tap.stop="clickSpShow"
        >
          <cover-view class="rate-list-wrap">
            <cover-view
              class="rate-item"
              :class="ccH5spTxt == item.txt ? 'active' : ''"
              v-for="(item, index) in spList"
              :key="index"
              ><cover-view @tap.stop="changeSpeed(item)">{{ item.txt }}</cover-view></cover-view
            >
          </cover-view>
        </cover-view>
      </video>
    </view>
    <!-- 试看 -->
    <view v-if="previewEnd" class="video-audition">
      <view class="text">试看已结束</view>
      <view class="u-flex">
        <view class="item">
          <edu-button type="primary" size="mini" @click="onPreviewDurationPay(1)"
            >购买该课程</edu-button
          >
        </view>
        <edu-button
          type="primary"
          size="mini"
          @click="onPreviewDurationPay(2)"
          v-if="Number(getCurrentPlayItem.price) > 0"
          >购买该课时</edu-button
        >
      </view>
    </view>

    <!-- 防挂机-弹窗 -->
    <prevent-popup
      v-if="detailsInfo.onhook_type == 1"
      ref="refPreventPopupVerify"
      :datas="playerData.onhook"
      @click="onVerifySuccess"
    ></prevent-popup>

    <!-- 防挂机-弹题 -->
    <prevent-question
      v-else-if="detailsInfo.onhook_type == 2"
      ref="refPreventQuestionVerify"
      :course_id="detailsInfo.id"
      :course_type="detailsInfo.course_type"
      @click="onVerifySuccess"
    ></prevent-question>

    <!-- 人脸 -->
    <edu-face
      v-else-if="detailsInfo.onhook_type == 3"
      ref="refFaceVerify"
      @confirm="onFaceVerifyConfirm"
    ></edu-face>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { uploadFile } from '@/utils/uploadFile.js'
import preventQuestion from './preventQuestion'
import preventPopup from './preventPopup'
import noticeBar from './notice-bar'
export default {
  props: {
    detailsInfo: {
      type: Object,
      default: () => {},
    },
    course_lock: {
      type: [String, Number],
      default: '',
    },
  },
  components: {
    preventQuestion,
    preventPopup,
    noticeBar,
  },
  data() {
    return {
      menuKey: 0,
      videoContext: null,
      src: '', //音频链接
      autoplay: false, // 是否自动播放
      continue: false, // 播放完成后是否继续播放下一首，需定义@next事件
      controls: true, // 是否显示默认播放控件
      initialTime: 0, // 指定视频初始播放位置
      current: 0, // 当前进度(s)
      duration: 0, // 总时长(s)
      paused: true, // 是否处于暂停状态
      seek: false, // 是否处于拖动状态
      isFullScreen: false, // 是否处于全屏
      loading: true, //是否处于读取状态
      initialLoading: true, // 首次加载
      timer: null, // 计时器
      currentDuration: 0, // 记录学习时长

      previewEnd: false, // 试看状态
      previewDuration: 0, // 视频试看时长

      faceModalVisible: false, // 人脸验证弹出
      faceVerifyEnd: true, // 人脸验证结束
      faceVerifyNumber: 0, // 还需要验证次数
      faceIntervalTime: 0, //见时间间隔
      faceNextVerifyTime: 0, // 下一次验证时间
      faceSceneType: 2, // 场景
      faceSceneId: 0, // 验证id
      faceShootStatus: false, // 续播状态

      ccH5spTxt: '常速',
      spShow: false, // 倍速显示隐藏
      hdShow: false, // 清晰度显示隐藏
      ccH5hdTxt: '', // 清晰度按钮信息
      videoSrcList: [], // 获取视频地址列表
      spList: [
        {
          num: '1.5',
          txt: '1.5倍',
        },
        {
          num: '1.25',
          txt: '1.25倍',
        },
        {
          num: '1',
          txt: '常速',
        },
        {
          num: '0.8',
          txt: '0.8倍',
        },
      ],

      usingMarquee: false, // 是否显示跑马灯
      marqueeText: '',

      playerData: {}, // 播放数据
      copyrightContent: '', // 版权内容
      copyrightShow: 0, // 是否显示版权信息
      noticeWidth: '',
      noticeScreenWidth: '',
    }
  },
  computed: {
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
      hasLogin: 'user/getHasLogin',
      globNavbarRightButtonWidth: 'projectSetting/globNavbarRightButtonWidth',
    }),
    ...mapState({
      getCurrentPlayItem: (state) => state.course.currentPlayItem,
    }),
    controlDurationStyle() {
      let width = this.duration >= 3600 ? 58 : 40
      return {
        width: width + 'px',
      }
    },
    videoType() {
      return this.getCurrentPlayItem.section_data.data_type || 1
    },
    marqueeColor() {
      const marqueeData = this.playerData.marquee
      if (!this.$u.test.empty(marqueeData)) {
        return this.$edu.test.hexToRgba(marqueeData.font_color, marqueeData.font_opacity)
      }
      return ''
    },
  },
  mounted() {
    // 暂停播放
    uni.$on('sectionPlayerPause', () => {
      if (this.videoContext) {
        this.paused = true
        this.videoContext.pause()
      }
    })
  },
  methods: {
    //格式化时长
    format(seconds) {
      let [day, hour, minute, second] = [0, 0, 0, 0]
      day = Math.floor(seconds / (60 * 60 * 24))
      hour = Math.floor(seconds / (60 * 60)) - day * 24
      // 不显示天数，将“天”部分的时间折算到小时中去
      let showHour = Math.floor(seconds / (60 * 60))
      minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60
      second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
      // 如果小于10，在前面补上一个"0"
      showHour = showHour < 10 ? '0' + showHour : showHour
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      return `${this.duration >= 3600 ? showHour + ':' : ''}${minute}:${second}`
    },
    /**
     * 播放初始化
     */
    init() {
      this.videoContext = uni.createVideoContext('mmVideoPlayer', this)
      // #ifdef APP-PLUS
      this.onLoadComplete()
      // #endif
      setTimeout(() => {
        this.loading = false
      }, 300)
    },
    // 开始/继续播放时
    onPlay() {
      if (this.paused) {
        this.videoContext.play()
        this.paused = false
      } else {
        this.videoContext.pause()
        this.paused = true
      }
      // 处理试看逻辑
      this.onPreviewDurationPlay()
    },
    // 当视频进入和退出全屏时
    onfullscreenchange() {
      if (this.isFullScreen) {
        this.isFullScreen = false
        this.videoContext.exitFullScreen()
      } else {
        this.isFullScreen = true
        this.videoContext.requestFullScreen({ direction: 90 })
      }
    },
    // 加载完成时
    onLoadComplete() {
      this.duration = this.getCurrentPlayItem.section_data.duration || 0

      // #ifndef APP-PLUS
      const marqueeData = this.playerData.marquee
      if (!this.$u.test.empty(marqueeData)) {
        // 版权声明
        this.copyrightContent = marqueeData.copyright_content
        let screenWidth = this.$u.sys().screenWidth
        this.noticeWidth = screenWidth - uni.upx2px(276) - this.globNavbarRightButtonWidth + 'px'
        this.noticeScreenWidth = this.$u.sys().screenHeight + 'px'
        setTimeout(() => {
          this.copyrightShow = marqueeData.copyright
        }, 1000)

        // 跑马灯
        const dataType = this.getCurrentPlayItem.section_data.data_type
        if (dataType == 1 && this.hasLogin) {
          let name = ''
          let phone = ''
          if (marqueeData.username) name = this.userInfo.nick_name
          if (marqueeData.phone) phone = this.userInfo.phone
          this.marqueeText = name + phone
          setTimeout(() => {
            this.usingMarquee = true
          }, 1000)
        }
      }
      // #endif

      setTimeout(() => {
        // 首次执行
        if (this.initialLoading) {
          this.handleAuditionTime()
          this.handleInitialTime()
          this.handleVerifyInit()
          this.initialLoading = false
        }
      }, 200)
    },
    // 当开始/继续播放时
    play(e) {
      this.paused = false
      this.timer = setInterval(() => {
        this.currentDuration++
        if (this.currentDuration % 10 == 0) {
          this.handleAddLearning()
        }
      }, 1000)
      this.onVerifyTimeupdate()
    },
    // 当暂停播放时
    pause() {
      this.paused = true
      clearInterval(this.timer)
      this.handleAddLearning()
    },
    // 当播放到末尾时
    ended() {
      clearInterval(this.timer)
      this.handleAddLearning()
      // 顺序模式
      if (this.course_lock == 1) return
      if (this.continue) {
        if (this.isFullScreen) {
          this.videoContext.exitFullScreen()
        }
        if (this.detailsInfo.onhook_type == 3) {
          this.handleModalConfirm()
          this.faceSceneType = 1
          this.faceSceneId = this.playerData.next_position.id
          this.faceShootStatus = true
        } else {
          this.next()
        }
      } else {
        this.paused = true
        this.current = 0
      }
    },
    // 播放进度变化时
    timeupdate(e) {
      this.duration = Math.floor(e.detail.duration)
      if (!this.seek) {
        this.current = Math.floor(e.detail.currentTime)
      }
      this.onVerifyTimeupdate() // 人脸
      this.onPreviewDurationEnd(e.detail.currentTime) // 处理试看
    },
    // 拖动进度条结束
    seeked(e) {
      this.seek = false
      this.videoContext.seek(Math.floor(e.detail.value))
    },
    // 正在拖动进度条
    seeking(e) {
      this.seek = true
      this.current = Math.floor(e.detail.value)
    },
    // 当视频进入和退出全屏时
    fullscreenchange(e) {
      if (e.detail.fullScreen) {
        this.isFullScreen = true
      } else {
        this.isFullScreen = false
      }
    },
    // 下一个
    next() {
      this.paused = true
      this.current = 0
      this.autoplay = true
      this.$store.commit('course/setCurrentPlayItem', {
        ...this.getCurrentPlayItem,
        ...this.playerData.next_position,
      })
      if (this.videoContext) {
        this.videoContext.pause()
      }
      this.$emit('next')
    },
    // 视频播放出错时触发
    error(e) {
      console.log(e)
    },
    // 获取播放地址
    getPlayerFile(data) {
      this.reset()
      this.playerData = data
      if (data.url_type == 1) {
        this.videoSrcList = data.fileurl_array
        this.src = data.fileurl_array[0].play_url
        this.ccH5hdTxt = data.fileurl_array[0].definition
      } else {
        this.src = data.fileurl_string
      }
      this.continue =
        !this.$u.test.empty(data.next_position) && !this.$u.test.empty(data.next_position.position)
      this.menuKey = this.$u.random(1, 1000000)
      if (this.detailsInfo.onhook_type == 3) {
        this.faceSceneId = this.getCurrentPlayItem.id
      }
      this.init()
    },
    reset() {
      this.loading = true
      this.previewEnd = false
      this.current = 0
      this.duration = 0
      this.initialTime = 0
      this.initialLoading = true
      this.usingMarquee = false
    },
    // 计算试听时长
    handleAuditionTime() {
      this.previewEnd = false
      let buy = this.getCurrentPlayItem.is_buy
      if (this.getCurrentPlayItem.hasOwnProperty('is_buy') && buy == 0) {
        let audition = this.getCurrentPlayItem.audition || 0
        this.previewDuration = Math.round(this.duration * (audition / 100))
      }
    },
    // 处理试看结束
    onPreviewDurationEnd(currentTime) {
      if (
        this.previewDuration > 0 &&
        this.previewDuration < this.duration &&
        this.previewDuration < currentTime
      ) {
        if (this.isFullScreen) {
          this.videoContext.exitFullScreen()
        }

        this.videoContext.seek(this.previewDuration)
        this.videoContext.pause()
        this.previewEnd = true
      }
    },
    // 试看结束点播放
    onPreviewDurationPlay() {
      if (this.previewEnd) {
        this.videoContext.seek(0)
        this.previewEnd = false
      }
    },
    // 试看购买
    onPreviewDurationPay(type) {
      this.$edu.judgeLogin(() => {
        if (type == 1) {
          this.$u.route({
            type: 'redirectTo',
            url: '/pageCourse/cart/course',
            params: {
              id: this.getCurrentPlayItem.course_id,
            },
          })
        } else {
          this.$u.route({
            type: 'redirectTo',
            url: '/pageCourse/cart/section',
            params: {
              id: this.getCurrentPlayItem.id,
            },
          })
        }
      })
    },
    // 断点续播
    handleInitialTime() {
      let buy = this.getCurrentPlayItem.is_buy || 0
      let time = this.getCurrentPlayItem.section_rate.current_time || 0
      if (this.$edu.test.isDef(buy) && buy == 0) return
      if (this.duration > 0 && time > this.duration - 5) {
        this.current = 0
        this.initialTime = 0
        this.videoContext.seek(0)
      } else {
        this.current = time
        setTimeout(() => {
          this.initialTime = time
          this.videoContext.seek(time)
        }, 1000)
      }
    },
    /* 人脸 START */
    handleVerifyInit() {
      // 课时是否购买
      let buy = this.getCurrentPlayItem.is_buy
      if (this.$edu.test.isDef(buy) && this.getCurrentPlayItem.is_buy == 0) return

      // 是否是视频
      let type = this.getCurrentPlayItem.section_data.data_type
      if (this.$edu.test.isDef(type) && type != 1) return

      // 是否开启验证
      if (this.detailsInfo.onhook_type == 0) return

      this.timer = null
      this.faceSceneType = 2
      this.faceShootStatus = false
      this.faceVerifyEnd = false
      this.faceNextVerifyTime = 0

      if (this.detailsInfo.onhook_type == 1) {
        const onhookData = this.playerData.onhook
        this.faceVerifyNumber = onhookData.alert_max_number // 验证次数
        this.faceIntervalTime = onhookData.alert_time_interval * 60 // 时间间隔
      } else if (this.detailsInfo.onhook_type == 2) {
        const examData = this.playerData.onhook_exam
        this.faceVerifyNumber = examData.answer_max_number // 验证次数
        this.faceIntervalTime = examData.answer_time_interval * 60 // 时间间隔
      } else if (this.detailsInfo.onhook_type == 3) {
        const faceData = this.playerData.face_data
        this.faceVerifyNumber = faceData.need_verify_number // 验证次数
        this.faceIntervalTime = faceData.verify_timespan * 60 // 时间间隔
      }
      this.nextVerifyTime()
    },
    // 计算下一次验证时间
    nextVerifyTime() {
      if (this.faceVerifyNumber > 0) {
        let time = this.currentDuration + this.faceIntervalTime
        this.faceNextVerifyTime = time
      } else {
        this.faceVerifyEnd = true
      }
    },
    // 播放时弹出人脸
    onVerifyTimeupdate() {
      // #ifndef APP
      if (
        !this.faceVerifyEnd &&
        this.faceNextVerifyTime > 0 &&
        this.faceNextVerifyTime <= this.currentDuration
      ) {
        uni.$u.debounce(
          () => {
            if (this.isFullScreen) {
              this.videoContext.exitFullScreen()
            }
            if (this.detailsInfo.onhook_type == 1) {
              this.$refs.refPreventPopupVerify.onOpen()
            } else if (this.detailsInfo.onhook_type == 2) {
              this.$refs.refPreventQuestionVerify.onOpen()
            } else if (this.detailsInfo.onhook_type == 3) {
              this.handleModalConfirm()
            }
            this.videoContext.pause()
          },
          1000,
          true
        )
      }
      // #endif
    },
    // 去验证人脸
    handleModalConfirm() {
      this.$refs.refFaceVerify.onFaceMessage()
    },
    // 人脸验证成功
    onVerifySuccess() {
      // 续播
      if (this.faceShootStatus) {
        this.next()
      } else {
        this.faceVerifyNumber-- // 还需要验证次数
        this.nextVerifyTime()
        setTimeout(() => {
          this.onPlay()
        }, 50)
      }
    },
    // 提交人脸验证
    onFaceVerifyConfirm(file) {
      uploadFile('/user/tencent/face/person/verify', file, {
        scene_key: 'course_section',
        scene_id: this.faceSceneId,
        scene_type: this.faceSceneType,
      })
        .then((res) => {
          this.$u.toast(res.msg)
          this.$refs.refFaceVerify.onClose()
          this.onVerifySuccess()
        })
        .catch((err) => {
          this.$u.toast(err.msg)
          this.$refs.refFaceVerify.resetPhoto()
        })
    },
    // 添加学习记录
    handleAddLearning() {
      const item = this.getCurrentPlayItem
      if (this.$edu.test.isDef(item.is_buy) && item.is_buy == 0) return
      this.$edu.api.createCourseRecord({
        course_id: item.course_id,
        section_id: item.id,
        current_time: this.current,
      })
    },

    /***
     * 点击显示隐藏倍速列表
     */
    clickSpShow() {
      if (this.spShow) {
        this.spShow = false
      } else {
        this.spShow = true
      }
    },
    /***
     * 点击显示隐藏清晰度列表
     */
    clickHdShow() {
      if (this.hdShow) {
        this.hdShow = false
      } else {
        this.hdShow = true
      }
    },
    /***
     * 点击切换倍速
     */
    changeSpeed(item) {
      if (item.txt == this.ccH5spTxt) {
        this.spShow = false
        return
      }
      let spNum = item.num
      let spTxt = item.txt
      this.ccH5spTxt = spTxt
      this.spShow = false
      this.videoContext.playbackRate(Number(spNum))
    },
    /***
     * 点击切换清晰度
     */
    changeQuality(e) {
      if (e.definition == this.ccH5hdTxt) {
        this.hdShow = false
        return
      }
      let vTime = this.current
      this.ccH5spTxt = '常速'
      this.ccH5hdTxt = e.definition
      this.src = e.play_url
      this.hdShow = false
      this.videoContext.playbackRate(1)
      setTimeout(() => {
        this.videoContext.play()
        this.videoContext.seek(parseInt(vTime))
      }, 200)
      this.initialLoading = false
    },
    // 获取节点信息
    getElQuery(className) {
      return new Promise((resolve) => {
        let queryInfo = ''
        queryInfo = uni.createSelectorQuery().in(this)
        queryInfo.select(className).boundingClientRect()
        queryInfo.exec((data) => {
          resolve(data)
        })
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>

<style lang="scss" scoped>
.mm-wrap {
  height: 415rpx;
  position: relative;
  background-color: #000000;
}
.video-loading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 102;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-video-player {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000000;

  .video-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .video-wrapper {
    flex: 1;
    width: 750rpx;
    height: 100%;
  }

  ::v-deep .uni-video-slots {
    z-index: 99;
    pointer-events: auto;
  }

  ::v-deep .video-control-slider {
    margin: 0;
    position: absolute;
    bottom: 40px;
    left: 0;
    z-index: 99;
    .uni-slider-handle {
      z-index: 99;
    }
  }

  .video-control-tool {
    display: flex;
    padding: 9px 0 0;
    width: 100%;
    height: 49px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    background-color: rgba(75, 75, 75, 0.15);
    box-sizing: border-box;

    .video-control-current {
      font-size: 12px;
      color: #ffffff;
      margin-left: 6px;
      line-height: 32px;
      text-align: center;
    }

    .video-control-duration {
      font-size: 12px;
      color: #ffffff;
      line-height: 32px;
      text-align: center;
    }

    .video-control-number {
      font-size: 12px;
      color: #ffffff;
      line-height: 32px;
    }

    .video-control-play {
      width: 20px;
      height: 20px;
      margin-top: 6px;
      margin-left: 15px;
    }

    .video-control-fullscreen {
      margin-left: auto;
      width: 20px;
      height: 20px;
      margin-top: 6px;
      margin-right: 15px;
    }
  }
  .current-quality {
    position: absolute;
    right: 10px;
    top: 85px;
    z-index: 100;
    width: 48px;
    height: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.7);
  }
  .quality-list {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 102;
    .quality-list-wrap {
      position: absolute;
      left: 0;
      bottom: 60px;
      display: flex;
      align-items: flex-end;
    }
    .quality-item {
      width: 55px;
      height: 26px;
      color: #ffffff;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .active {
      color: #ff920a;
    }
  }
  .current-rate {
    position: absolute;
    right: 10px;
    top: 120px;
    z-index: 100;
    width: 48px;
    height: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.7);
  }

  .rate-list {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 102;
    .rate-list-wrap {
      position: absolute;
      left: 0;
      bottom: 60px;
      display: flex;
      align-items: flex-end;
    }
    .rate-item {
      width: 55px;
      height: 26px;
      color: #ffffff;
      text-align: center;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .active {
      color: #ff920a;
    }
  }
}
.video-audition {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 1);
  .item {
    margin-right: 30rpx;
  }
  .text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ebeef5;
    line-height: 45rpx;
    margin-bottom: 25rpx;
  }
}
</style>
